<!--我的预约-->
<template>
    <div>
                <!-- 面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>我的预约</el-breadcrumb-item>
            </el-breadcrumb>
        <div style="margin: 10px auto;"></div>
              <el-alert
                    title="请及时在相应的时间点联系车,学时教练审核后才可以评价"
                    type="info">
              </el-alert>


              <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="近期预约" name="first"></el-tab-pane>
                <el-tab-pane label="全部预约" name="second"></el-tab-pane>
            </el-tabs>

            <el-table size="small"  style="width: 100%" :data="listData" highlight-current-row v-loading="loading"  element-loading-text="拼命加载中" >
                        
                        <el-table-column
                            fixed
                            width="200"
                        prop="username"
                        label="教练名">
                        </el-table-column>

                        <el-table-column
                          
                            width="200"
                        prop="url"
                        label="头像">
                        <template slot-scope="scope">
                                <el-avatar :size="50" :src="scope.row.url"></el-avatar>
                        </template>
                        </el-table-column>



                         <el-table-column
                            
                            width="200"
                        prop="tel"
                        label="电话">
                        </el-table-column>

                        <el-table-column
                            
                            width="200"
                        prop="createTime"
                        label="预约时间">
                        </el-table-column>

                        <el-table-column
                            
                            width="200"
                        prop="startTime"
                        label="开始时间">
                        <template slot-scope="scope">
                               <div style="color:red;font-size:21px">{{scope.row.startTime}}</div>
                        </template>
                        </el-table-column>

                        <el-table-column
                            
                            width="200"
                        prop="endTime"
                        label="结束时间">
                        </el-table-column>

                        <el-table-column
                          
                            width="200"
                        prop="stateName"
                        label="状态">
                        <template slot-scope="scope">
                                <span style="color:red">{{scope.row.stateName}}</span>
                        </template>
                        </el-table-column>
                        

                    <el-table-column  align="center" label="操作" min-width="300">
                        <template slot-scope="scope">
                            
                            <el-button v-if="scope.row.state == '1'" @click="pinjia(scope.row.id)" size="mini"   type="danger" >评 价</el-button>
                        
                    </template>
                </el-table-column>
                </el-table>

                 <!-- 用户评价 -->
            <el-dialog title="用户评价" :visible.sync="Visible" width="30%">
            <el-form label-width="120px" :model="Form" >
                <el-form-item label="内容" >
                <el-input size="small"  type="textarea"
                :rows="2" v-model="Form.remarks" auto-complete="off" placeholder="评价"></el-input>
                </el-form-item>
                <el-form-item label="服务打分" >
                      <el-rate
                        v-model="Form.score"
                        show-text>
                        </el-rate>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" type="primary"  class="title" @click="submitForm()">提 交</el-button>
            </div>
            </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activeName:"first",
            listData:[],
            loading:false,
            Form:{
                id:'',
                remarks:'服务到位',
                score:5
            },
            Visible:false
        }
    },
    created(){
        this.findDate(0);
    },
    methods: {
            findDate(type){
                this.loading=true;
                setTimeout(()=>{
                    this.loading =false
                },500)
                this.$api.get("/order/token/findOrdersAndCoach",{"type":type},res=>{
                        this.listData = res.data.data;
                })
            },
            handleClick(tab, event) {
                this.findDate(tab.index);
            },
            pinjia(id){ //评价
                this.Visible =true
                this.Form.id = id;
            },
            submitForm(){ //评价提交
                this.$api.post("/order/token/submitPinJia",this.Form,res=>{
                     this.Visible =false;
                     this.findDate(0);
                })
            }


    },
}
</script>
<style scoped>

</style>